<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <title>todo list</title>
  <style>
    .del{text-decoration: line-through; color: #ccc !important;}
  </style>
</head>

<body>
  <div id="app">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            todo list
          </a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <div class="rol-md-8">
          <div class="panel panel-warning">
            <div class="panel-heading ">
              <div class="h3 text-danger">你还有 {{count}} 件事待完成</div>
              <input @keyup.13="add" class="form-control"  v-model="title" type="text">
            </div>
            <div class="panel-body">
              <ul class="list-group">
                <li class="list-group-item" v-for="(todo, index) in filterTodos" @dblclick="remember(todo)">
                   <span :class="{del: todo.isSelected}" v-show="cur != todo">
                      <span>{{todo.title}} </span>
                      <input v-model="todo.isSelected" class="pull-left" type="checkbox">
                   </span>
                   <input type="text" @blur="cancel" v-model="todo.title" v-show="cur == todo" v-focus="cur == todo">
                   <button @click="remove(todo)"  class="btn btn-xs btn-danger pull-right">&tritime;</button>
                </li>
              </ul>
            </div>
            <div class="panel-footer">
              <div class="nav nav-pills">
                <li role="presentation" :class="{active: hash== 'all'}"><a href="#/all">全部</a></li>
                <li role="presentation" :class="{active: hash== 'finish'}"><a href="#/finish">已完成</a></li>
                <li role="presentation" :class="{active: hash== 'unfinish'}"><a href="#/unfinish">未完成</a></li>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="js/todo.js"></script>
</body>

</html>
